<template>
  <div class="industry-feature-swipe">
    <van-swipe :autoplay="5000">
      <van-swipe-item
        v-for="item in industryGroup"
        :key="item.FeatureImg"
      >
        <div
          v-for="(group, index) in item"
          :key="index"
          class="industry-group"
        >
          <img
            v-lazy="group.FeatureImg"
            class="industry-img"
          >
        </div>
      </van-swipe-item>
    </van-swipe>
    <div
      v-if="industryGroup.length < 2"
      class="van-swipe__indicators"
    >
      <i class="van-swipe__indicator van-swipe__indicator--active" />
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { ImagePreview } from 'vant'
export default Vue.extend({
  // eslint-disable-next-line vue/require-default-prop
  // eslint-disable-next-line vue/require-prop-types
  props: ['industryList'],
  data () {
    return {
      industryGroup: [],
    }
  },
  created () {
    const industryGroup = []
    for (let i = 0, l = this.industryList.length; i < l;) {
      industryGroup.push(this.industryList.slice(i, i + 2))
      i += 2
    }
    this.$set(this.$data, 'industryGroup', industryGroup)
    console.log('industryGroup-------', this.industryGroup)
  },
  mounted () {
    this.$el.addEventListener('click', this.onImagePreview, false)
  },
  beforeDestroy () {
    this.$el.removeEventListener('click', this.onImagePreview, false)
  },
  methods: {
    onImagePreview (e: Event) {
      let target = e.target as HTMLImageElement
      if (target!.nodeName === 'IMG') {
        e.stopPropagation()
        e.preventDefault()
        ImagePreview({
          images: [
            target.src,
          ],
          showIndex: false,
        })
      }
    },
  },
})
</script>
<style lang="scss" scoped>
.industry-feature-swipe {
  position: relative;
  /deep/ {
    .van-swipe__indicators {
      padding: 0 5px;
      bottom: 0;
    }
    .van-swipe__indicator {
      background-color: $primary-web;
    }
    .van-swipe__indicator--active {
      width: 40px;
      background-color: $primary-web;
      border-radius: 10px;
    }
  }
}
.industry-group {
  width: 48%;
  height: 200px;
  margin-right: 4%;
  margin-bottom: 40px;
  display: inline-block;
}
.industry-group:nth-child(2n) {
  margin-right: 0;
}
.industry-img {
  width: 100%;
  height: 100%;
  border-radius: 3px;
}
</style>
